<template>
    <Layout></Layout>
    <h1 @click="showLoading">{{ $filters.format('我是根组件') }}{{ $env }}</h1>
    <renderDom title="xixi" @on-click="getNum"></renderDom>
    <img
        id="img"
        src="./assets/logo.png"
        width="100"
        height="100"
        alt=""
    >
    <el-table :data="tableData" style="width: 100%;">
        <el-table-column prop="xxx" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
    </el-table>
    <el-calendar v-model="value" />
    <el-switch />
    <el-input class="ipt"></el-input>
    <div>
        <button @click="testAdd">+</button>
        pinia: {{ Test.current }} --- {{ Test.name }}
    </div>
    <div>
        <p>pinia-action-user: {{ Test.user }}</p>
        <hr>
        <p>pinia-action-name: {{ Test.name }}</p>
        <hr>
        <p>getters: {{ Test.newName }}</p>
        <hr>
        <button @click="change">change</button>
        <button @click="reset">reset</button>
    </div>
</template>

<script setup lang="ts">
import renderDom from './App'
import { ComponentInternalInstance, provide, ref } from 'vue'
import Layout from './layout/index.vue'
import useBase64 from './hooks'
import { userInfoStore } from './store'
import { storeToRefs } from 'pinia'
import { after } from 'lodash'

// provide注入
provide('flag', ref(false))

const getNum = (item:string) => {
    console.log(item)
}

useBase64({
    el: '#img',
}).then(res => {
    console.log(res.baseUrl)
})

// 全局插件
const { appContext } = getCurrentInstance() as ComponentInternalInstance

const showLoading = () => {
    console.log(appContext)
    appContext.config.globalProperties.$loading.show()

    setTimeout(() => {
        appContext.config.globalProperties.$loading.hide()
    }, 5000)
}

// element 插件使用
const value = ref(new Date())
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]

// pinia 使用
// 于vuex 区别
// 1. 可以直接修改store
// 2. 使用$patch 批量修改
// 3. 使用$patch 函数形式修改(多)
// 4. 使用$state 修改必须包含所有的值
// 5. 使用actions 方法调用
const Test = userInfoStore()

// 使用解构赋值失去响应式 使用storeToRefs 恢复响应式
const { current, name } = storeToRefs(Test)

const testAdd = () => {
    // Test.current++

    // Test.$patch({
    //     current: 123456,
    //     name: '大大',
    // })

    // Test.$patch((state) => {
    //     state.current = 1111
    //     state.name = '汉化'
    // })

    // Test.$state = {
    //     current: 2000,
    //     name: '就哈哈哈哈',
    // }

    // Test.setCurrent(567)
    current.value = 222
    name.value = '学习'
}

// action
const change = () => {
    Test.setUser()
    Test.setName('52121')
}

const reset = () => { // $reset 重置state
    Test.$reset()
}

Test.$subscribe((args, state) => { // $subscribe 监听
    console.log(args, state)
}, {
    detached: true, // 组件销毁了任然存在
    deep: true, // 深度监听与watch类似
    flush: 'post',
})

Test.$onAction((args) => {
    args.after(() => {
        console.log('after')
    })
    
    console.log(args)
}, true) // 第二个参数 组件销毁了仍然存活

</script>

<style lang="less" scoped>
.h1 {
    width: 200px;
    height: 200px;
    color: red;
}

.ipt {
    :deep(input) {
        background-color: red;
    }
}

</style>
